<div class="page-layout simple fullwidth angular-material-elements">

    <!-- HEADER -->
    <div class="header accent p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
         fxLayoutAlign.gt-xs="space-between center">

        <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
            <div fxLayout="row" fxLayoutAlign="start center">
                <mat-icon class="secondary-text s-18">home</mat-icon>
                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                <span class="secondary-text">Components</span>
                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                <span class="secondary-text">Angular Material Elements</span>
            </div>
            <div class="h2 mt-16">{{title}}</div>
        </div>

        <a mat-raised-button class="reference-button mt-16 mt-sm-0" href="https://material.angular.io/"
           target="_blank">
            <mat-icon class="mr-8">link</mat-icon>
            <span>Reference</span>
        </a>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content p-24">
        <div *ngFor="let example of examples">
            <example-viewer [example]="example"></example-viewer>
        </div>
    </div>
</div>

